/**
 * Description
 *
 * Creation Date 26/12/2017
 * @author Candy
 */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { is, fromJS } from 'immutable';
import * as action from '../redux/actions/index';

const Main = mySetting => {
	let setting = {
		id: '',  //应用唯一id表示
		url: '', //请求地址
		data: {},  //发送给服务器的数据
		component: <div></div>   //数据回调给的组件
	}

	setting = {...mySetting};
	console.log('setting', setting);

	class Index extends Component {
		static defaultProps = {...setting};

		constructor(props) {
			super(props);
		}

		render() {
			// return <this.props.component {...this.props} state={this.props.state.toJS()} />
			return <this.props.component {...this.props}  state={this.props.state}  />
		}

		componentWillMount() {
			if(setting.url) {
				this.props.initDataAction(setting.url, setting.data);
			}
		}

		componentWillReceiveProps(props) {}

		shouldComponentUpdate(nextProps, nextState) {
			if(nextProps.state.get('isFetching')) {
				return false;
			}
			return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState));
		}
	}

	//mapStateToProps and mapDispatchToProps
	return connect(state => {  //将顶层组件与模版绑定后return回去，配置路由的时候用的就是和redux绑定的组件，所以其实每个路由匹配的都是同一个组件，只不过这个组件的内容不同
		const { initDataReducer, fetchDataReducer } = state;
		return {
			staticContext: {},
			state: state['initDataReducer'],
			fetchDataReducer
		}
	}, action)(Index); //连接redux
};

export default Main;